<template>
    <div
        class="SmallPlay"
        :class="{
            TB1: SmallPlay_TB1,
            TB2: SmallPlay_TB2,
        }"
    >
        <!-- 音频滑块 -->
        <div class="top">
            <van-slider
                v-model="sliderValue"
                bar-height="2px"
                active-color="#8669ff"
                inactive-color="#372ea5"
                disabled
            >
                <!-- 滑块按钮 -->
                <template #button>
                    <div></div>
                </template>
            </van-slider>
        </div>

        <div class="content">
            <div class="left">
                <!-- 封面 -->
                <div
                    class="cover"
                    :class="{ TB: playSuspend }"
                    :style="{ backgroundImage: 'url(' + cover + ')' }"
                    @click="Play_TB_Fn({ name: routerName, tf: true })"
                ></div>
                <div class="diTu" :class="{ TB: playSuspend }"></div>
                <div class="p_box">
                    <!-- 歌名 -->
                    <p class="songTitle">{{ songTitle }}</p>
                    <!-- 歌手 -->
                    <p class="singer">{{ singer }}</p>
                </div>
            </div>
            <div class="right">
                <div class="fn_box">
                    <!-- 上一首 -->
                    <div class="last" @click="songLastNext(false)">
                        <img src="../assets/ic_previous.png" alt="" />
                    </div>
                    <!-- 播放暂停 -->
                    <div class="play" @click="playSuspend_Switch">
                        <img :src="playSuspend_img" alt="" />
                    </div>
                    <!-- 下一首 -->
                    <div class="next" @click="songLastNext(true)">
                        <img src="../assets/ic_next.png" alt="" />
                    </div>
                </div>
                <!-- 播放目录按钮 -->
                <div class="playDirectory">
                    <img
                        src="../assets/播放_目录.png"
                        alt=""
                        @click="clickShow"
                    />

                    <!-- 目录盒 -->
                    <div class="directory_box" v-if="show">
                        <!-- 提示 -->
                        <div class="Tips" @click="clickShow">
                            请及时删除过期音频路径
                        </div>
                        <div class="content_box">
                            <!-- 目录 -->
                            <div
                                class="directory"
                                v-for="(item, index) in songsData"
                                :key="index"
                            >
                                <!-- 目录元素 -->
                                <div class="directory_item">
                                    <div
                                        :class="{ idid: id === item.id }"
                                        class="songTitle"
                                        @click="clickPlay(item, item.id, index)"
                                    >
                                        {{ item.songTitle }}
                                    </div>
                                    <div class="singer">{{ item.singer }}</div>
                                </div>
                                <!-- 删除按钮 -->
                                <div class="Del">
                                    <van-icon
                                        name="delete-o"
                                        @click="clickDel(index)"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
const {
    mapState: controlAudioMapState,
    mapMutations: controlAudioMapMutations,
    mapGetters: controlAudioMapGetters,
    mapActions: controlAudioMapActions
} = createNamespacedHelpers('controlAudio');
export default {
    name: "SmallPlay",
    props: {
        // 当前播放时间和音频总时间的百分比
        percent: {
            type: Number,
            default: 0,
        }
    },
    data() {
        return {
            show: false,
        }
    },
    computed: {
        // 监听当前路由名字
        routerName() {
            return this.$route.name;
        },


        // 滑块进度
        sliderValue() {
            return this.percent * 100
        },

        // 引用state的SmallPlay_TB1,SmallPlay_TB2
        ...mapState(['SmallPlay_TB1', 'SmallPlay_TB2']),


        // 音频的播放状态
        ...controlAudioMapState([
            'id',
            'playSuspend',
            'cover',
            'songTitle',
            'singer',
            'pattern',
            'songsData',
            'songIndex'
        ]),

        playSuspend_img() {
            if (this.playSuspend) {
                return require('../assets/播放.png')
            } else {
                return require('../assets/暂停.png')
            }
        }
    },
    methods: {
        // 弹出play
        ...mapMutations(['Play_TB_Fn']),
        // 切换播放状态
        ...controlAudioMapMutations([
            'playSuspend_Switch',
            'SelectPlay',
            'SelectPlay',
            'removeSongsData',
            'addSongsData'
        ]),
        // 切换列表显示状态
        clickShow() { this.show = !this.show; },

        // f上一首 t下一首
        songLastNext(tf) {
            this.$emit('LastNext');

            // 随机播放
            if (this.pattern === 1) {
                let index = this.randomIndex(this.songIndex);
                console.log("🚀🚀🚀🚀🚀 ==> songLastNext ==> index", index);

                this.SelectPlay(index);
            }
            //顺序播放 单曲循环
            else {
                // 上一首
                if (tf) {
                    let index = this.songIndex + 1;
                    if (this.songIndex === this.songsData.length - 1) {
                        index = 0;
                    }
                    console.log("🚀 ==> audioEnded ==> index", index);
                    this.SelectPlay(index);
                }
                // 下一首
                else {
                    let index = this.songIndex - 1;
                    if (this.songIndex === 0) {
                        index = this.songsData.length - 1;
                    }
                    console.log("🚀 ==> audioEnded ==> index", index);
                    this.SelectPlay(index);
                }

            }
        },
        // 获取一个随机下标
        randomIndex(index) {
            // 生成一个随机数
            let num = Math.floor(Math.random() * this.songsData.length);

            // 与当前播放下标 相同就进行递归
            if (num === index) { return this.randomIndex(index); }
            else { return num };
        },

        // 点击列表播放
        clickPlay(obj, id, i) {
            if (this.id !== id) {
                this.$emit('LastNext');
                this.SelectPlay(i);

                this.addSongsData(obj);
                sessionStorage.setItem(
                    "songsData",
                    JSON.stringify(this.songsData)
                );
            }
        },

        // 点击删除
        clickDel(i) {
            console.log("🚀 ==> clickDel ==> i", i);
            this.removeSongsData(i);
            sessionStorage.setItem(
                "songsData",
                JSON.stringify(this.songsData)
            );
        }
    }
}

</script>

<style lang="less" scoped>
.SmallPlay {
    z-index: 7;
    position: fixed;
    transition: bottom 2.2s;
    right: 0;
    left: 0;
    bottom: -65px;
    height: 50px;
    background-color: #1a186b;

    /deep/.van-slider--disabled {
        opacity: 1;
    }

    .content {
        display: flex;
        margin: 0 12px 0 20px;
        // 左盒
        .left {
            width: 50%;
            display: flex;
            flex-shrink: 0;

            // 封面
            .cover {
                width: 48px;
                height: 48px;
                background-size: contain;
                background-position: center center;
                background-repeat: no-repeat;
                flex-shrink: 0;
                transform: translateY(0px);
                transition: transform 1.5s ease-out 0.2s;
                z-index: 5;
            }
            // 底图
            .diTu {
                position: absolute;

                width: 48px;
                height: 48px;
                background-image: url('../assets/singer.png');
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                transform: translateY(0px);
                transition: transform 1.5s ease-out 0.2s;
                z-index: 2;
            }

            // 动画
            .TB {
                transform: translateY(-15px);
            }

            // 文本盒
            .p_box {
                margin-left: 8px;
                max-width: 65%;
                margin-top: 5px;
                // 歌名
                .songTitle {
                    color: rgba(255, 255, 255, 0.88);
                    font-size: 16px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }

                // 歌手
                .singer {
                    margin-top: 2px;
                    color: #6b64af;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
            }
        }
        // 右盒
        .right {
            width: 50%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 10px;

            // 功能盒
            .fn_box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex: 1;
                margin-right: 24px;

                div {
                    width: 20px;
                    height: 20px;
                    display: flex;
                    opacity: 0.7;
                }
                div.play {
                    width: 35px;
                    height: 35px;
                    opacity: 0.9;
                }
            }

            // 目录按钮
            .playDirectory {
                display: flex;
                width: 40px;
                height: 40px;
                // opacity: 0.7;
                position: relative;

                // 目录盒
                .directory_box {
                    opacity: 1;
                    position: absolute;
                    width: 180px;
                    right: -12px;
                    bottom: 46px;
                    background-color: #131226;
                    box-shadow: -1px -1px 3px 1px rgba(255, 255, 255, 0.4);
                    border-top-left-radius: 30%;
                    overflow: hidden;
                    padding: 8px 10px;

                    .Tips {
                        color: rgb(255, 66, 66);
                        font-weight: 600;
                        font-size: 12px;
                        text-align: right;
                        margin-bottom: 5px;
                    }
                    .content_box {
                        overflow: scroll;
                        max-height: 200px;
                        margin-left: 5px;

                        // 目录元素
                        .directory {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin-top: 15px;

                            // 内容
                            .directory_item {
                                .songTitle {
                                    font-size: 14px;
                                    max-width: 130px;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    word-break: break-all;
                                    color: #e4e4e4;
                                    margin-bottom: 2px;
                                    &.idid {
                                        font-weight: 600;
                                        background-image: linear-gradient(
                                            90deg,
                                            #e652d8,
                                            #2b97fc
                                        );
                                        background-clip: text;
                                        -webkit-background-clip: text;
                                        color: transparent;
                                    }
                                }
                                .singer {
                                    color: #898a88;
                                    max-width: 130px;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    word-break: break-all;
                                }
                            }

                            .Del {
                                font-size: 18px;
                                color: #fff;
                            }
                        }
                    }
                }
            }
        }
    }
}

// 一层
.TB1 {
    bottom: 0px;
    transition: bottom 2s ease-out;
}
// 二层
.TB2 {
    bottom: 44px;
    transition: bottom 2s ease-out;
}
</style>